<script setup>
    import footerVue from "./footer.vue";
    import headerVue from "./header.vue";
    import bodyVue from "./body.vue";
</script>

<template>
    <h3>slot.vue</h3>
    <!-- 匿名插槽 -->
    <headerVue>
        <a href="https://www.baidu.com" target="_blank">匿名插槽-百度</a>
    </headerVue>

    <!-- 具名插槽 需要配合template使用 -->
    <footerVue>
        <!-- <template v-slot:url> -->
        <!-- 简写 -->
        <template #url>
            <a href="https://www.baidu.com" target="_blank">具名插槽-百度</a>
        </template>
    </footerVue>

    <!-- 作用域插槽 子组件向父组件传递数据，并在父组件定义的模板中渲染 -->
    <bodyVue>
        <!-- <template v-slot:url> -->
        <!-- <template #url="data"> -->
        <template #url="{title, user}">
            <a href="https://www.baidu.com" target="_blank">{{title}}-{{user}}</a>
        </template>
    </bodyVue>

</template>

<style scoped>

</style>